<!DOCTYPE html>
<html>
<head>
    <title>View Animation</title>
    <meta charset="UTF-8">
    <script src="OpenLayers4.3.1/ol.js"></script>
    <link rel="stylesheet" href="OpenLayers4.3.1/ol.css" type="text/css">
</head>
<body>
<div id="map" class="map"></div>
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
<button id="pan-to-shanghai">Pan to shanghai</button>
<button id="elastic-to-changsha">Elastic to changsha</button>
<button id="bounce-to-guilin">Bounce to guilin</button>
<button id="getSize">getSize</button>
<script>
    var shanghai = ol.proj.fromLonLat([121.48, 31.22]);
    var changsha = ol.proj.fromLonLat([111.54, 27.51]);
    var guilin = ol.proj.fromLonLat([110.290195,25.273566]);

    var view = new ol.View({
        center:guilin,
        zoom: 15,
        maxZoom:18,
        minZoom :10
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Image({
                source:  new ol.source.ImageWMS({
                    url: 'http://localhost:8080/geoserver/wms',
                    params: {'LAYERS': 'chinaMainLand',tiled:true},
                    serverType: 'geoserver',
                    crossOrigin: 'anonymous'
                })
            })
        ],
        // Improve user experience by loading tiles while animating. Will make
        // animations stutter on mobile or slow devices.
        loadTilesWhileAnimating: true,
        view: view,
        logo : false,
    });

    // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
    function bounce(t) {
        var s = 7.5625, p = 2.75, l;
        if (t < (1 / p)) {
            l = s * t * t;
        } else {
            if (t < (2 / p)) {
                t -= (1.5 / p);
                l = s * t * t + 0.75;
            } else {
                if (t < (2.5 / p)) {
                    t -= (2.25 / p);
                    l = s * t * t + 0.9375;
                } else {
                    t -= (2.625 / p);
                    l = s * t * t + 0.984375;
                }
            }
        }
        return l;
    }

    // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
    function elastic(t) {
        return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
    }

    function onClick(id, callback) {
        document.getElementById(id).addEventListener('click', callback);
    }

    onClick('rotate-left', function() {
        view.animate({
            rotation: view.getRotation() + Math.PI / 2
        });
    });

    onClick('rotate-right', function() {
        view.animate({
            rotation: view.getRotation() - Math.PI / 2
        });
    });

    onClick('getSize', function() {
        console.log("map.getSzie : " +map.getSize());
        console.log("view.calculateExtent : " +view.calculateExtent());
        alert("当前地图范围"+view.calculateExtent())
    });



    onClick('pan-to-shanghai', function() {
        view.animate({
            center: shanghai,
            duration: 2000
        });
    });

    onClick('elastic-to-changsha', function() {
        view.animate({
            center: changsha,
            duration: 2000,
            easing: elastic
        });
    });

    onClick('bounce-to-guilin', function() {
        view.animate({
            center: guilin,
            duration: 500,
            easing: bounce
        });
    });
    
</script>
</body>
</html>